<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas动画</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
    <script>
        let speed = 1;
        let img = new Image();
        let btnImg = new Image();
        let canvas = document.getElementById('canvas');
            canvas.width = 500;
            canvas.height = 500;
        let ctx = canvas.getContext('2d');
        function init(){
            img.src = "./img/bg.png";
            btnImg.src = "./img/btn.png"
            run()
        }
        function run(){
            // speed+=10;
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(speed * Math.PI / 180);
            ctx.translate(-250,-250);
            ctx.drawImage(img,0,0,500,500);
            ctx.restore();
            ctx.beginPath();
            ctx.strokeStyle = 'rgba(255,255,255,0)';
            ctx.arc(250,250,90,0,Math.PI*2)
            ctx.closePath();
            ctx.stroke();
            ctx.drawImage(btnImg,160,160,180,180);
            // console.log(parseInt(speed * Math.PI / 360))
            window.requestAnimationFrame(run);
        }
        init();
        canvas.onmousemove = function(e){
            // console.log(e.pageX,e.pageY)
            // console.log(ctx.isPointInPath(e.pageX,e.pageY))
        }
        canvas.onclick = function(e){
            let start = ctx.isPointInPath(e.pageX,e.pageY);
            if(start){
                console.log('1')
                window.cancelAnimationFrame(run);
            }
        }
        document.addEventListener('click',(e) =>{
            // console.log(e)
            window.cancelAnimationFrame(run)
            
        })
    </script>
</html>